<template>

	<view class="index">
		
		<!-- #ifdef MP-WEIXIN -->
		<view class="wx-nav">
			<!-- 搜索图标 -->
			<view class="iconfont">&#xe607;</view>
			<!-- 文本提示 -->
			<view>首页</view>
			<!-- 消息图标 -->
			<view class="iconfont">&#xe86f;</view>
		</view>
		<!-- #endif -->

		<scroll-view scroll-x="true" class="scroll-conter" :scroll-into-view="scrollIntoIndex">
			<view v-for="(item,index) in topBar" :key="index" class="scroll-son" @tap="changeTap(index)"
				:id="'top'+index">
				<text :class='topBarIndex===index?"f-active-color":"f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>
		<swiper @change="onchangeBar" :current="topBarIndex" :style="'height:'+swHeight+'px;'">
			<swiper-item v-for="(item,index) in newtopBar" :key="index">
				<scroll-view scroll-y="true" :style="'height:'+swHeight+'px;'" @scrolltolower="loadMore(index)">
					<block v-if="item.data.length>0">
						<block v-for="(k,i) in item.data" :key="i">


							<!-- 首页(推荐)模板 -->
							<indexSwiper v-if="k.type==='swiperList'" :dataList='k.data'></indexSwiper>
							<template v-if="k.type==='showList'">
								<Show :dataList='k.data'></Show>
								<Card cardH1="猜你喜欢"></Card>
							</template>


							<!-- 其他模板 -->
							<Banner v-if="k.type==='bannerList'" :dataList="k.imgUrl"></Banner>

							<template v-if="k.type==='iconList'">
								<Icons :dataList='k.data'></Icons>
								<Card cardH1="热销爆品"></Card>
							</template>

							<template v-if="k.type==='hotList'">
								<Hot :dataList='k.data'></Hot>
								<Card cardH1="推荐店铺"></Card>
							</template>

							<template v-if="k.type==='storeList'">
								<Store :dataList='k.data'></Store>
								<Card cardH1="为您推荐"></Card>
							</template>



							<ShopList v-if="k.type==='shopList'" :dataList='k.data'></ShopList>

						</block>
					</block>
					<view v-else>
						加载失败
					</view>
					<view class="loadData" f-color>
						{{item.loadText}}
					</view>

				</scroll-view>
			</swiper-item>
		</swiper>

		<!-- 		推荐 

		<indexSwiper></indexSwiper>
		<Show></Show>
		<Card cardH1="猜你喜欢"></Card>
		<ShopList></ShopList> -->



		<!--     其他模板

		<Banner></Banner>
		<Icons></Icons>
		<Card cardH1="热销爆品"></Card>
		<Hot></Hot>
		<Card cardH1="推荐店铺"></Card>
		<Store></Store>
		<Card cardH1="为您推荐"></Card>
		<ShopList></ShopList> -->

<tabbar cureentPage='index'></tabbar>
	</view>
</template>

<script>
	import Tabbar from "@/component/common/tabbar.vue"
	import $http from "@/common/api/request.js"
	import indexSwiper from "@/component/swiper.vue";
	import Show from "@/component/show.vue"
	import Card from "@/component/like.vue"
	import ShopList from "@/component/shopList.vue"
	import Banner from "@/component/Banner.vue"
	import Icons from "@/component/Icons.vue"
	import Hot from "@/component/Hot.vue"
	import Store from "@/component/Store.vue"
	export default {
		data() {
			return {
				topBarIndex: 0,
				title: 'Hello',
				scrollIntoIndex: "top0",
				swHeight: 0,
				navbar: 0, //状态栏高度
				statusBar: 0, // 状态栏高度 + 导航栏高度  
				customBar: 0, // 自定义标题与胶囊对齐高度
				topBar: [
					// {name:"推荐"},
					// {name:"运动户外"},
					// {name:"服饰内衣"},
					// {name:"鞋靴箱包"},
					// {name:"美妆个护"},
					// {name:"家具数码"},
					// {name:"视频母婴"}
				],
				newtopBar: [],
			}
		},
		onLoad() {
			this.init()
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.swHeight = res.windowHeight - uni.upx2px(80) - this.getSystemHeight();
				}
			})
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			} else if (e.index == 1) {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			}
		},



		components: {
			indexSwiper,
			Show,
			Card,
			ShopList,
			Banner,
			Icons,
			Hot,
			Store,
			Tabbar
		},


		methods: {
			init() {

				$http.request({
					url: "/index_list/data"
				}).then((res) => {
					this.topBar = res.topBar
					this.newtopBar = this.initData(res);
				}).catch(() => {
					uni.showToast({
						title: "请求失败",
						icon: "none"
					})
				})


				// uni.request({
				// 	url: "http://192.168.28.1:3000/api/index_list/data",
				// 	success: (res) => {
				// 		const data = res.data.data
				// 		this.topBar = data.topBar
				// 		this.newtopBar = this.initData(data);
				// 	}

				// 	})	




			},

			initData(res) {
				var arr = [];
				for (var i = 0; i < this.topBar.length; i++) {
					var obj = {
						data: [],
						load: "first",
						loadText: "上拉加载更多.."
					}
					if (i == 0) {
						obj.data = res.data
					}
					arr.push(obj)
				}
				return arr;
			},

			// 点击顶栏
			changeTap(index) {
				if (this.topBarIndex === index) {
					return;
				}
				this.topBarIndex = index;
				this.scrollIntoIndex = 'top' + index;


				if (this.newtopBar[this.topBarIndex].load === 'first') {
					this.addData()
				}

			},

			// 对应滑块
			onchangeBar(e) {
				this.changeTap(e.detail.current);
			},

			// 获取可视区高度
			getSystemHeight() {
				const res = uni.getSystemInfoSync();
				console.log(res.platform, res.statusBarHeight)
				const system = res.platform;
				if (system === 'ios') {
					return 44 + res.statusBarHeight;
				} else if (system === ' android') {
					return 48 + res.statusBarHeight;
				} else {
					return 0;
				}
			},

			// 对应显示不同数据
			addData(callback) {
				// 获取索引
				let topIndex = this.topBarIndex
				// 拿到id
				let id = this.topBar[topIndex].id


				// 请求页算法
				let page = Math.ceil(this.newtopBar[topIndex].data.length / 5) + 1
				console.log(page)


				// 请求数据

				$http.request({
					url: '/index_list/' + id + '/data/' + page + '',
				}).then((res) => {
					this.newtopBar[topIndex].data = [...this.newtopBar[topIndex].data, ...res];
				}).catch(() => {
					uni.showToast({
						title: "请求失败",
						icon: "none"
					})
				})

				//  uni.request({
				//  	url:'http://192.168.28.1:3000/api/index_list/'+id+'/data/'+page+'',
				// success: (res) => {
				//     if(res.statusCode != 200){
				// 		return;
				// 	}else{
				// 		let data=res.data.data;
				// 	    console.log(data)
				// 		this.newtopBar[topIndex].data=[...this.newtopBar[topIndex].data,...data];
				// 	}
				// }
				//  })
				// 当首次滑动后赋值为last(避免重复请求数据)
				this.newtopBar[topIndex].load = 'last';

				if (typeof callback === 'function') {
					callback();
				}


			},

			// 上拉数据
			loadMore(index) {
				this.newtopBar[index].loadText = '加载中...';

				this.addData(() => {
					this.newtopBar[index].loadText = '上拉加载更多...';
				})


			}
		}
	}
</script>

<style lang="scss" scoped>

	.wx-nav {
		display: flex;
	}

	.scroll-conter {
		width: 100%;
		height: 80rpx;
		white-space: nowrap;
	}

	.scroll-son {
		display: inline-block;
		padding: 10rpx 30rpx;
		font-size: 32rpx;
	}

	.f-active-color {
		padding: 10rpx 0;
		border-bottom: 6rpx solid #49BDFB;
	}


	.loadData {
		border-top: 2rpx solid #49BDFB;
		line-height: 60rpx;
		text-align: center;

	}
</style>
